<template>
	<view class="warp">
		<view class="textbox fillet">
			<input v-model="formdata.Title" type="text" placeholder="填写你想发布的赛事标题" />
			<textarea
				v-model="formdata.Description"
				placeholder-style="font-size: 26rpx;line-height: 1.6;"
				placeholder="填写你要发布的赛事介绍，全面的赛事介绍更容易吸引大家的加入哦~"
			></textarea>
		</view>
		<view class="img_list fillet">
			<view class="title">赛事宣传图片</view>
			<view class="img_box">
				<view class="img" v-for="(item,i) in imgArr" :key="i">
					<image :src="item.tempUrl" mode="aspectFill"></image>
					<view class="icon" @click.stop="delImg(i)">
						<image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1710154762492571.png" mode=""></image>
					</view>
				</view>
				<!-- #ifdef MP-WEIXIN -->
					<view class="img addimg" @tap="upload" v-if="imgArr.length<9">
					</view>								
				<!-- #endif -->
				<!-- #ifdef APP-PLUS -->
					<view class="img addimg" @tap="selectImg_APP" v-if="imgArr.length<9">
					</view>
				<!-- #endif -->				
			</view>
		</view>
		<view class="checkbox fillet">
			<view class="check_item" @click="upShow = true">
				<view class="tit">比赛开始</view>
				<view class="check_content">
					<view :class="['lit', upTime ? '' : 'gary']">{{ upTime ? upTime : '请选择比赛开始时间' }}</view>
					<uni-icons size="16" color="#979797" type="right"></uni-icons>
				</view>
			</view>
			<view class="check_item" @click="dowShow = true">
				<view class="tit">比赛结束</view>
				<view class="check_content">
					<view :class="['lit', dowTime ? '' : 'gary']">{{ dowTime ? dowTime : '请选择比赛结束时间' }}</view>
					<uni-icons size="16" color="#979797" type="right"></uni-icons>
				</view>
			</view>
			<view class="check_item" @click="endShow = true">
				<view class="tit">报名截止</view>
				<view class="check_content">
					<view :class="['lit', endTime ? '' : 'gary']">{{ endTime ? endTime : '请选择报名截止时间' }}</view>
					<uni-icons size="16" color="#979797" type="right"></uni-icons>
				</view>
			</view>
			<view class="check_item" @click="nav_to('/pages/ball/ball_site')">
				<view class="tit">比赛地址</view>
				<view class="check_content">
					<view :class="['lit', formdata.Address ? '' : 'gary']">{{ formdata.Address ? formdata.Address : '请选择比赛地址' }}</view>
					<uni-icons size="16" color="#979797" type="right"></uni-icons>
				</view>
			</view>

			<view class="check_item">
				<view class="tit">联系电话</view>
				<view class="check_content">
					<input class="lit" v-model="formdata.Mobile" type="tel" placeholder="请输入联系电话" />
				</view>
			</view>
			<view class="check_item">
				<view class="tit">人数要求</view>
				<view class="check_content">
					<input class="lit" v-model="formdata.PeopleNum" type="number" placeholder="请输入参赛人数" />
				</view>
			</view>
			<view class="check_item">
				<view class="tit">是否收费</view>
				<view class="check_content">
					<view class="inp_box">
						<u-radio-group v-model="formdata.IsFee">
							<u-radio activeColor="#202020" name="1" shape="circle" labelColor="#333" label="收费"></u-radio>
							<u-radio activeColor="#202020" name="0" shape="circle" labelColor="#333" label="不收费"></u-radio>
						</u-radio-group>
					</view>
				</view>
			</view>
			<view class="check_item" v-if="formdata.IsFee==1">
				<view class="tit">参赛费用</view>
				<view class="check_content">
					<input v-model="formdata.RegisterFee" style="width: 75%;" class="lit" type="number" placeholder="请输入参赛费用" />
					<view style="margin-left: 10rpx;">
						/元
					</view>
				</view>
			</view>
		</view>
		<u-datetime-picker
			ref="upPicker"
			mode="datetime"
			:show="upShow"
			v-model="upValue"
			@cancel="upShow = false"
			@confirm="upFun"
			:formatter="formatter"
		></u-datetime-picker>
		
		
		<u-datetime-picker
			ref="upPicker"
			mode="datetime"
			:show="dowShow"
			v-model="upValue"
			@cancel="dowShow = false"
			@confirm="dowFun"
			:formatter="formatter"
		></u-datetime-picker>
		
		
		<u-datetime-picker
			ref="upPicker"
			mode="datetime"
			:show="endShow"
			v-model="upValue"
			@cancel="endShow = false"
			@confirm="endFun"
			:formatter="formatter"
		></u-datetime-picker>

		<view style="height: 140rpx"></view>
		<view class="btn_box" @click="send">
			<view class="go_btn">发布赛事</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			dateShow: false,
			dateColumns: [
				[
					{ label: '每天', value: 'day' },
					{ label: '每周一', value: 'day1' },
				],
			],
			upShow: false,
			upTime: '',
			upValue: Number(new Date()),
			dowShow: false,
			dowTime: '',
			
			endShow: false,
			endTime: '',
			endValue: Number(new Date()),
			
			address: '',

			timeShow: false,
			start: '00:00',
			end: '23:59',
			
			formdata:{
				Title:'',// 赛事主体
				Description:'',//  赛事介绍
				Banner:[],//  图片
				EndDate:'',//  结束时间
				StartDate:'',//  开始时间
				Address:'',//  地址
				IsFee:'',//  是否收费 0 不收费 1 收费
				RegisterFee:'',//  费用
				PeopleNum:'',//  人数
				ActType:"赛事",
				RegisterEndDate:'',//  报名截止日期
				Mobile:'',
				Longitude:'',
				Latitude:''
			},
			imgArr:[]
		};
	},
	onLoad() {
		uni.$on('site', async data => {
			this.formdata.Address = data.ShopName;
			// this.ShopName = data.ShopName;
			// this.formdata.ShopID = data.ID;
			// this.formdata.RegisterFee = data.Price;
			this.formdata.Longitude = data.Longitude;
			this.formdata.Latitude = data.Latitude;
		
			let res = await this.$util.getGeocoder(data.Address);
			this.formdata.City = res.result.addresscomponents.city;
		});
		uni.$on('reward', async data => {
			// this.formdata.reward = data
		})
		uni.$on('custom', async data => {
			// this.Place = data.Place
			// this.ShopName = data.Place
			// this.formdata.ShopID = 0
			this.formdata.Address = data.Place
			this.formdata.Longitude = data.Longitude
			this.formdata.Latitude = data.Latitude
		})
	},
	onUnload() {
		uni.$off('site')
		uni.$off('reward')
		uni.$off('custom')
	},
	onReady() {
		// 微信小程序需要用此写法
		this.$refs.datetimePicker.setFormatter(this.formatter);
	},
	methods: {
		formatter(type, value) {
			if (type === 'year') {
				return `${value}年`;
			}
			if (type === 'month') {
				return `${value}月`;
			}
			if (type === 'day') {
				return `${value}日`;
			}
			return value;
		},
		onTimeChange(e) {
			console.log('选择的时间为：', uni.$u.timeFormat);
		},
		dateFun(e) {
			console.log(e.value[0]);
			this.dateShow = false;
		},
		checkAddress() {
			uni.chooseLocation({
				success: (res) => {
					console.log(res);
					this.address = res.address;
				},
				fail: (err) => {
					console.log('出错了', err);
				},
			});
		},
		changeTime(e){
			return uni.$u.timeFormat(e.value, 'yyyy-mm-dd hh:MM')
		},
		upFun(e) {
			this.upTime = this.changeTime(e);
			this.formdata.StartDate = this.upTime
			this.upShow = false;
		},
		dowFun(e) {
			this.dowTime = this.changeTime(e);
			this.formdata.EndDate = this.dowTime
			this.dowShow = false;
		},
		endFun(e){
			this.endTime = this.changeTime(e);
			this.formdata.RegisterEndDate = this.endTime
			this.endShow = false;
		},
		// 文件上传
		async uploading(url, tempKey) {
			console.log('url ----------' + url);
		
			const r = await this.$upload(url, pro => {
				this.imgArr.forEach(item => {
					if (item.tempKey == tempKey) {
						item.pro = pro;
					}
				})
			})
			this.imgArr.forEach(item => {
				if (item.tempKey == tempKey) {
					item.netPath = r;
				}
			});
		
		
			console.log('upload file ' + r);
			this.formdata.Banner.push(r)
		},
		upload(){
			let _this = this;
			uni.chooseMedia({
				count: 9,
				mediaType: ['image'],
				sourceType: ['album', 'camera'],
				maxDuration: 30,
				camera: 'back',
				success(res) {
						console.log(res);
					res.tempFiles.forEach(async item => {
						let o = {
							duration: 0,
							fileType: item.fileType,
							tempUrl: item.tempFilePath,
							flieUrl: item.tempFilePath,
							tempKey: uni.$u.guid(8),
							pro: 0
						}
			
						
						_this.imgArr.push(o);
						// _this.formdata.Images.push(o)
						
					  let rex =	await _this.uploading(o.flieUrl, o.tempKey);
						console.log('rex-------',rex);
					});
				}
			})
		},
		selectImg_APP() {
			let _this = this;
			uni.showActionSheet({
				itemList: ['选择照片', '取消'],
				success: function(res) {
					if (res.tapIndex == 0) {
						let ind = 1
						uni.chooseImage({
							// count:  允许上传的照片数量
							count: 9,
							// sizeType:  original 原图，compressed 压缩图，默认二者都有
							sizeType: ["original", "compressed"],
							sourceType: ["album"],
							success(res) {
								console.log(res)
								res.tempFiles.forEach(async item => {
									let o = {
										duration: 0,
										fileType: 'image',
										tempUrl: item.path,
										flieUrl: item.path,
										tempKey: uni.$u.guid(8),
										pro: 0
									}
								
									_this.imgArr.push(o);
									
									let rex =	await _this.uploading(o.flieUrl, o.tempKey);
								});
							}
						});
						return;
						
		
					}
				},
				fail: function(res) {
		
				}
			})
		},
		delImg(i){
			this.imgArr.splice(i,1)
			this.formdata.Images.splice(i,1)
		},
	
		async send(){
			let con = this.formdata
			if(!con.Title){
				this.$pv.msg('请填写赛事标题');
				return
			}
			if(!con.Description){
				this.$pv.msg('请填写赛事介绍');
				return
			}
			if(!con.Banner.length){
				this.$pv.msg('至少上传一张图片');
				return
			}
			if(!con.StartDate){
				this.$pv.msg('请选择比赛开始时间');
				return
			}
			if(!con.EndDate){
				this.$pv.msg('请选择比赛结束时间');
				return
			}
			if(!con.RegisterEndDate){
				this.$pv.msg('请选择报名截止时间');
				return
			}
			if(!con.Address){
				this.$pv.msg('请填写比赛地址');
				return
			}
			if(!con.Mobile){
				this.$pv.msg('请填写联系电话');
				return
			}
			if(!con.IsFee){
				this.$pv.msg('请选择收费方式');
				return
			}
			if(con.IsFee==1 && !con.RegisterFee){
				this.$pv.msg('请输入参赛费用');
				return
			}
			this.formdata.Banner = JSON.stringify(this.formdata.Banner)
			let res = await this.$api.post('/Action/Publish',this.formdata)
			if(res.message=='success'){
				this.$pv.msg('发布成功');
				setTimeout(()=>{
					uni.navigateBack()
				},700)
			}
		},
	},
};
</script>

<style lang="scss">
page{
	background-color: #f6f6f6;
}
.gary {
	color: #979797 !important;
}
.fillet {
	border-radius: 16rpx;
	background-color: #fff;
	box-sizing: border-box;
}
.warp {
	padding: 26rpx;
	.img_list{
		margin-top: 30rpx;
		box-sizing: border-box;
		padding: 26rpx 32rpx;
		.title{
			font-size: 30rpx;
		}
		image{
			width: 100%;
			height: 100%;
		}
		.img_box{
			display: flex;
			align-items: center;
			// justify-content: space-evenly;
			flex-wrap: wrap;
		}
		.videobox{
			padding: 32rpx;
			position: relative;
			>view{
				width: 100%;
				height: 300rpx;
				border-radius: 16rpx;
				overflow: hidden;
				video{
					width: 100%;
					height: 100%;
				}
			}
			.icon{
				position: absolute;
				right: 10rpx;
				top: 10rpx;
				width: 50rpx;
				height: 50rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				// border-radius: 50%;
				z-index: 999;
				image{
					width:40rpx;
					height: 40rpx;
					background: #fff;
					border-radius: 50%;
				}
			}
		}
		.img{
			width: 200rpx;
			height: 200rpx;
			border-radius: 8rpx;
			margin-right: 16rpx;
			margin-top: 16rpx;
			// overflow: hidden;
			position: relative;
			image{
				border-radius: 8rpx;
			}
			.icon{
				position: absolute;
				right: -20rpx;
				top: -14rpx;
				width: 50rpx;
				height: 50rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				// border-radius: 50%;
				z-index: 999;
				image{
					width:40rpx;
					height: 40rpx;
					background: #fff;
					border-radius: 50%;
				}
			}
		}
		.img:nth-child(3n){
			margin-right: 0;
		}
		.addimg{
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #F6F6F6;
			image{
				width: 80rpx;
				height: 80rpx;
			}
			&::after{
				content: '';
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%,-50%);
				width: 50rpx;
				height: 10rpx;
				border-radius: 8rpx;
				background-color: #DADADA;
			}
			&::before{
				content: '';
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%,-50%) rotate(90deg);
				width: 50rpx;
				height: 10rpx;
				border-radius: 8rpx;
				background-color: #DADADA;
			}
		}
	}
	.textbox {
		padding: 26rpx 32rpx;
		input {
			font-weight: bold;
			padding-bottom: 20rpx;
			border-bottom: 1rpx solid #E4E4E4;
		}
		textarea {
			width: 100%;
			margin-top: 20rpx;
			font-size: 26rpx;
			line-height: 1.6;
		}
	}
	.checkbox {
		margin-top: 30rpx;
		padding: 0 32rpx;
		.check_item {
			border-bottom: 2rpx solid #E4E4E4;
			display: flex;
			align-items: center;
			justify-content: space-between;
			view {
				// color: #fff;
				font-size: 28rpx;
			}
			.check_content {
				display: flex;
				align-items: center;
				justify-content: flex-end;
				padding: 26rpx 0;
				width: 70%;
				input {
					font-size: 28rpx !important;
					width: 100%;
					text-align: right;
				}
				.input-placeholder {
					font-size: 26rpx !important;
				}
				.lit {
					width: 100%;
					text-align: right;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
				.inp_box {
					display: flex;
					align-items: center;
					flex-wrap: wrap;
					justify-content: flex-end;
					/deep/ .u-radio-group{
						.u-radio{
							margin-left: 20rpx;
						}
						text{
							font-size: 28rpx !important;
						}
					}
					>view {
						display: flex;
					}
				
					.total_reward {
						font-size: 28rpx;
						color: rgb(156, 156, 156);
						margin-top: 16rpx;
					}
				}
			}
		}
		.check_item:last-child {
			border: 0;
		}
	}
	.btn_box {
		// background-color: #262626;
		position: fixed;
		width: 100%;
		box-sizing: border-box;
		bottom: 0;
		left: 0;
		padding: 20rpx 26rpx;
		padding-bottom: 40rpx;
		background-color: #fff;
		z-index: 9;
		.go_btn {
			border-radius: 50rpx;
			font-size: 30rpx;
			color: #fff;
			padding: 20rpx 0;
			text-align: center;
			background-color: #202020;
		}
	}
}
</style>
